<template>
  <div>
    <common-head title="购物车" />
    <empty v-if="cart.lists.length === 0" />
    <div class="cart-main">
      <!-- 登录后消失的按钮 -->
      <!-- <van-button size="large" type="info" v-if='!checkLogin()'>登录后就消失</van-button> -->

      <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" @click="goLogin">登录后可以同步电脑和手机购物车中的商品</van-notice-bar>
      <van-swipe-cell v-for="(item,index) in cart.lists" :key="item.id">
        <div class="item">
          <van-checkbox v-model="item.isChecked" @click="checkChange"></van-checkbox>
          <van-card :num="item.num" :price="item.minPrice" :title="item.name" :thumb="item.pic">
            <template #footer>
              <van-button size="small" plain type="default" @click="add_num(index)">+</van-button>
              <span>{{ item.num }}</span>
              <van-button size="small" plain type="default" @click="reduce_num(index)">-</van-button>
            </template>
          </van-card>
        </div>

        <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            @click="del_item(index)"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
      <!-- 底部结算栏 -->
      <van-submit-bar
        :price="cart.total*100"
        button-text="提交订单"
        id="submitOrder"
        @submit="onSubmit"
      >
        <van-checkbox v-model="cart.isAllChecked" @click="allChecked">全选</van-checkbox>
      </van-submit-bar>
      <!-- 底部标签栏 -->
      <van-tabbar :route="true" active-color="#f66">
        <van-tabbar-item to="/home">
          <span>首页</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="home"></van-icon>
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/cates">
          <span>分类</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="fenlei1"></van-icon>
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/cart">
          <span>购物车</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="icon-"></van-icon>
          </template>
        </van-tabbar-item>

        <van-tabbar-item to="/mine">
          <span>我的</span>
          <template #icon="props">
            <van-icon class="iconfont" class-prefix="icon" name="wode01"></van-icon>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import { Dialog, Toast } from "vant";
import CommonHead from "@/components/CommonHead";
import Empty from "@/components/Empty";
import { mapState, mapActions, mapMutations } from "vuex";
// 引入checkLogin用作购物车局部登录判断
import { checkLogin } from "@/utils";
export default {
  created() {
    // 页面初始化的总价格
    this.calc_total();
  },
  methods: {
    goLogin () {
      this.$router.push('/login')
    },
    checkLogin,
    // 增加商品数量
    add_num(index) {
      this.addNum(index);
      this.calc_total();
    },
    // 减少商品数量
    reduce_num(index) {
      this.reduceNum(index);
      this.calc_total();
    },
    // 删除商品
    del_item(index) {
      Dialog.confirm({
        message: "您确认删除吗",
      })
        .then(() => {
          this.delItem(index);
          this.calc_total();
        })
        .catch(() => {
          Toast("取消删除");
        });
    },
    allChecked() {
      // 点击全选按钮 设置单选按钮状态
      this.setSingleCheck(this.cart.isAllChecked);
      this.calc_total();
    },
    checkChange() {
      this.setCart(this.cart);
      // 单个商品 选择
      // 判断商品是否全部选中 处理全选按钮选中
      const { lists } = this.cart;
      const isAllChecked = lists.every((item) => item.isChecked);
      // console.log(isAllChecked)
      // 改变全选
      this.setAllChecked(isAllChecked);
      this.calc_total();
    },
    // 判断是否登录
    onSubmit() {
      if (this.checkLogin()) {
        let checkedItems = this.cart.lists.filter((item) => item.isChecked);
        this.createOrder(checkedItems);
        this.$router.push("/order");
      } else {
        this.$router.push({ path: "/login", query: { path: "/cart" } });
      }
    },
    ...mapActions(["calc_total"]),
    ...mapMutations([
      "addNum",
      "reduceNum",
      "delItem",
      "setAllChecked",
      "setSingleCheck",
      "setCart",
      "createOrder",
    ]),
  },
  computed: {
    ...mapState(["cart"]),
  },
  components: {
    CommonHead,
    Empty,
  },
};
</script>

<style lang="scss" scoped>
#submitOrder {
  margin-bottom: 50px;
}
.cart-main {
  margin-top: 46px;
}
.van-card__content {
  justify-content: space-around;
}
.item {
  display: flex;
  .van-card {
    flex: 1;
  }
}
/deep/ .van-swipe-cell__right {
  display: flex;
  align-items: center;
  button {
    height: 100%;
  }
}
</style>
